<template>
   <div class='home' style="width: 100%; height: 87%;">
        <div style="width: 100%; height: 98%; overflow: auto;">
            <el-tabs v-model="this.$store.state.activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first">
                    <el-table :data="this.$store.state.tableData" border  :row-class-name="tableRowClassName" show-summary style="width: 100%">
                        <el-table-column prop="id" label="警号" width="180" />
                        <el-table-column prop="name" label="姓名" />
                        <el-table-column prop="amount1" sortable label="成绩评分" />
                        <el-table-column prop="amount2" sortable label="教官评分" />
                        <el-table-column prop="amount3" sortable label="综合评分" />
                        <el-table-column prop="amount3" sortable label="请假天数" />
                        <el-table-column prop="amount3" sortable label="缺勤天数" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="请假列表" name="second">
                    <el-table :data="this.$store.state.tableData" border style="width: 100%">
                        <el-table-column prop="id" label="警号" width="180" />
                        <el-table-column prop="name" label="姓名" />
                        <el-table-column prop="amount1" label="请假描述" />
                        <el-table-column prop="amount1" sortable label="时间" />
                        <el-table-column fixed="right" label="操作" width="220">
                            <template #default>
                                <el-button type="success">同意</el-button>
                                <el-button type="danger" plain>拒绝</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="课堂考勤" name="third">
                    <el-table
                        :data="this.$store.state.tableData"
                        style="width: 100%"
                        row-key="id"
                        border
                        lazy
                        :load="load"
                        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                        >
                        <el-table-column prop="id" label="时间" />
                        <el-table-column prop="name" label="班级" />
                        <el-table-column prop="amount1" label="是否满员" />
                        <el-table-column prop="amount1" label="缺少人员" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="成绩展示" name="fourth">
                    <el-table :data="this.$store.state.tableData" border style="width: 100%">
                        <el-table-column prop="id" label="警号" width="180" />
                        <el-table-column prop="name" label="姓名" />
                        <el-table-column prop="amount1" label="内容" />
                        <el-table-column prop="amount1" sortable label="成绩" />
                    </el-table>
                </el-tab-pane>
    
            </el-tabs>
            <div style=" position: fixed; right: 23px; top: 76px;">
                <el-input
                    v-model="input"
                    style="width: 240px"
                    placeholder="搜索"
                    clearable
                />
            </div>
        </div>
        <div style="display: flex; justify-content: center; ">
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
   </div>
</template>
<script>
export default {
    name: '',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    data () {
        return {
           
        }
    },
    computed: {},
// 侦听器
    watch: {},
    created () {},
    mounted () {},
// 组件方法
    methods: {
        handleClick(tab, event) {
            console.log(tab, event)
        },
        tableRowClassName ({ row, rowIndex,}) {
            if (rowIndex === 1) {
                return 
            } else if (rowIndex === 3) {
                return 'success-row'
            }
            return ''
        },
        load(row,treeNode,resolve){
            setTimeout(() => {
                resolve([
                {
                    id: 31,
                    date: '2016-05-01',
                    name: 'wangxiaohu',
                    amount1: 'No. 189, Grove St, Los Angeles',
                },
                {
                    id: 32,
                    date: '2016-05-01',
                    name: 'wangxiaohu',
                    amount1: 'No. 189, Grove St, Los Angeles',
                },
                ])
            }, 1000)
        }
    },
// 创建前
    beforeCreate () { },
// 挂载前
    beforeMount () {},
// 更新前 
    beforeUpdate () {},
    updated () {},
// 组件创建最初始keep-alive标签中有效
    activated () { },
// 组件停用时
    deactivated () {},
// 销毁前
    beforeDestroy () {},
// 销毁后
    destroyed () {}
}
</script> 
<style >
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>